<template>
	<section>
    <el-row >
				<div style="margin: 0 0 10px;font-size:18px;font-weigth:" >各科目试卷上传进度</div>
		</el-row>
    <el-row type="flex" >
      <template v-for="(item,idx) in exampaper" >
        <el-col :span="1" style="flex" :key="idx">
          <div style="margin:2px 5px 0 0;font-size:18px;float:right">{{item.text}}</div>
        </el-col>
        <el-col :span="5" style="flex" :key="idx">
          <el-progress stroke-linecap="butt" :stroke-width="30" :percentage="item.exist*100/item.total" :color='item.color' :format="format(item)" :text-inside="true"></el-progress>
        </el-col>
      </template>
		</el-row>
		<el-row class="toolbar" style="padding-bottom: 0px;" type="flex"  >
			 <el-col :span="8" v-show="false">
				<el-button type="primary" @click="handleAdd" style="float:right" size="medium">上传试卷</el-button>
			</el-col>
			<el-col :span="24"  style="float:right">
				<el-form :inline="true" :model="forms1" >
          	<el-form-item >
						<el-select v-model="forms1.province" style="width:140px;" placeholder="选择省份"  size="medium">
								<template v-for="item in provinceList"  >
										<el-option :key="item.province" :label="item.province" :value="item.province"></el-option>
								</template>
						</el-select>
					</el-form-item>
					<el-form-item >
						<el-select v-model="forms1.course" style="width:140px;" placeholder="选择科目" size="medium">
								<template v-for="(item,idx) in exampaper"  >
										<el-option :key="idx" :label="item.text" :value="item.text"></el-option>
								</template>
						</el-select>
					</el-form-item>
					<el-form-item >
						<el-select v-model="forms1.states" style="width:140px;" placeholder="选择上传进度" size="medium">
								<template v-for="(item,idx) in uploadStatelist"  >
										<el-option :key="idx" :label="item.val" :value="item.val"></el-option>
								</template>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getUsers" size="medium">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
     
		</el-row>
		
		<!--列表-->
		<el-table  :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" border
		:header-cell-style="{background:'#204BD6',color:'#fff'}"
		style="width: 100%;">
			<!-- <el-table-column type="selection" width="55"></el-table-column> -->
			<el-table-column prop="id" label="准考证号"  header-align='center' align='center'>
			</el-table-column>
			<el-table-column prop="province" label="省份"  header-align='center'>
			</el-table-column>
			<el-table-column prop="examroomid" label="考场"  header-align='center'>
			</el-table-column>


			<el-table-column prop="color" label="色彩" width="200" header-align='center' align='center'>
        <template slot-scope="scope">
					<el-image
					style="width: 150px; height: 150px"
					:src="scope.row.color.url==null ? imagerMiss:scope.row.color.url"
					></el-image>
				</template>
			</el-table-column>

			<el-table-column prop="writing" label="素描" width="200" header-align='center' align='center'>
        <template slot-scope="scope">
					<el-image
					style="width: 150px; height: 150px"
					:src="scope.row.writing.url==null ? imagerMiss:scope.row.writing.url"
					></el-image>
				</template>
			</el-table-column>

			<el-table-column prop="sketch" label="速写" width="200" header-align='center'>
				<template slot-scope="scope">
					<el-image
					style="width: 150px; height: 150px"
					:src="scope.row.sketch.url==null ? imagerMiss:scope.row.sketch.url"
					></el-image>
				</template>
			</el-table-column>

      <el-table-column prop="compose" label="设计" width="200" header-align='center'>
				<template slot-scope="scope">
				<el-image
				style="width: 150px; height: 150px"
				:src="scope.row.compose.url==null ? imagerMiss:scope.row.compose.url"
				></el-image>
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作" width="70" header-align='center'>
				<template scope="scope">
					<el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" >
			</el-pagination>
		</el-col>

		<!--新增界面-->
		<el-dialog title="上传试卷" :visible.sync="addFormVisible" :close-on-click-modal="false" class="dialog1" >
			<exampaperUploader ></exampaperUploader>
		</el-dialog>
	</section>
</template>

<script>
	import axios from 'axios';
	import {  editUser, addUser,paper_page ,getStudioList} from '../../api/api';
	import exampaperUploader from'./exampaperUploader'
	import provinceCodeList from "../../utils/provinceCode";
	import uploadStatesCodelist from "../../utils/uploadStatesCode";
	export default {
		components:{exampaperUploader},
		data() {
			return {
				provinceList:provinceCodeList,
				uploadStatelist:uploadStatesCodelist,
				studios:[],
				exampaper:[],
				forms: {
					province: '',
					course:'',
        },
				imagerMiss:'/static/assets/icon/miss.jpg',
        imageurl:'http://localhost:5022/img/cat.jpeg',
				users: [],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
				forms1:{
					course:'',//科目
					province:'',//选择省份
					studios:'',//选择省份
					current:1,
					size:100,
					states:''
				},
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				addFormVisible: false,//新增界面是否显示
				addLoading: false,

			}
		},
		methods: {
      format:function(paper) {
        return (percentage)=>{
          return `已上传${paper.total}张`
        }
      },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				this.listLoading = true;
				paper_page(this.forms1).then((res) => {
					console.log(res)
					this.total = res.result.total;
					this.users = res.result.records;
					this.listLoading = false;
				});
			},
			//删除
			handleQuery: function (index, row) {
				this.$store.state.studio.name=row.studioname
				this.$store.state.studio.studentsCount=row.studentsCount
				this.$router.push({path: '/studioDetail'})
			
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
			},

			selsChange: function (sels) {
				this.sels = sels;
			},
			
		},
		mounted() {
			axios.defaults.headers.common["Art-Token"] = sessionStorage.getItem('Art-Token');
			getStudioList().then((res)=>{this.studios=res})
			this.exampaper=this.$store.state.exampaper
			this.getUsers();
		}
	}

</script>

<style>
.el-progress-bar__outer{
	background-color:  #CBCEDC;
	border-radius:7px;
}
.dialog1{
	width: 900px;
	margin: 0 auto 50px
}
.el-button--small{
	padding: 1px 1px;
}
.el-dialog__header{
	text-align: center;
}
.el-dialog__title{
	font-size: 32px;
}
</style>